<!DOCTYPE HTML>
<html>

<head>
    <title>proton.js-render-EaseljsRender</title>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #333333;
            margin: 0px;
            overflow: hidden;
        }

        #container {
            width: 960px;
            height: 400px;
            margin-top: 50px;
            margin-left: -501px;
            left: 50%;
            position: absolute;
        }

        #testCanvas {
            width: 100%;
            height: 100%;
            background: #000000;
        }
    </style>
    <script src="//localhost:3001/build/proton.js"></script>
    <script src="../../lib/easeljs-0.8.2.min.js"></script>
    <script src="../../lib/preloadjs-0.6.2.min.js"></script>
</head>

<body>
    <div id="container">
        <canvas id="testCanvas" width=960 height=400></canvas>
    </div>

    <script>
        var proton, hertEmitter, plusEmitter;
        var stage, w, h, loader;
        var sky, grant, ground, hill, hill2;

        init();

        function init() {
            stage = new createjs.Stage("testCanvas");
            w = stage.canvas.width;
            h = stage.canvas.height;

            initLoader();
        }

        function initLoader() {
            manifest = [
                { src: "spritesheet_grant.png", id: "grant" },
                { src: "sky.png", id: "sky" },
                { src: "ground.png", id: "ground" },
                { src: "hill1.png", id: "hill" },
                { src: "hill2.png", id: "hill2" },
                { src: "c1.png", id: "hert1" },
                { src: "c2.png", id: "hert2" },
                { src: "c3.png", id: "hert3" },
                { src: "c4.png", id: "hert4" },
                { src: "p1.png", id: "plus1" },
                { src: "p2.png", id: "plus2" },
                { src: "p3.png", id: "plus3" },
                { src: "p4.png", id: "plus4" },
                { src: "p5.png", id: "plus5" }
            ];
            loader = new createjs.LoadQueue(false);
            loader.addEventListener("complete", handleComplete);
            loader.loadManifest(manifest, true, "./image/");
        }

        function handleComplete() {
            sky = new createjs.Shape();
            sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(0, 0, w, h);
            //By default swapping between Stage for StageGL will not allow for vector drawing operation such as BitmapFill, useless you cache your shape.
            sky.cache(0, 0, w, h);

            var groundImg = loader.getResult("ground");
            ground = new createjs.Shape();
            ground.graphics.beginBitmapFill(groundImg).drawRect(0, 0, w + groundImg.width, groundImg.height);
            ground.tileW = groundImg.width;
            ground.y = h - groundImg.height;
            //By default swapping between Stage for StageGL will not allow for vector drawing operation such as BitmapFill, useless you cache your shape.
            ground.cache(0, 0, w + groundImg.width, groundImg.height);

            hill = new createjs.Bitmap(loader.getResult("hill"));
            hill.setTransform(Math.random() * w, h - hill.image.height * 4 - groundImg.height, 4, 4);
            hill.alpha = 0.5;
            hill2 = new createjs.Bitmap(loader.getResult("hill2"));
            hill2.setTransform(Math.random() * w, h - hill2.image.height * 3 - groundImg.height, 3, 3);

            createProton();

            var spriteSheet = new createjs.SpriteSheet({
                framerate: 30,
                "images": [loader.getResult("grant")],
                "frames": { "regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165 },
                // define two animations, run (loops, 1.5x speed) and jump (returns to run):
                "animations": {
                    "run": [0, 25, "run", 1.5],
                    "jump": [26, 63, "run"]
                }
            });
            grant = new createjs.Sprite(spriteSheet, "run");
            grant.y = 35;
            stage.addChild(sky, hill, hill2, ground, grant);
            stage.addEventListener("stagemousedown", handleJumpStart);


            createjs.Ticker.timingMode = createjs.Ticker.RAF;
            createjs.Ticker.addEventListener("tick", tick);
        }

        function handleJumpStart() {
            grant.gotoAndPlay("jump");
            setTimeout(function () {
                plusEmitter.emit(2);
                plusEmitter.p.x = grant.x;
            }, 300);
        }

        function createProton() {
            proton = new Proton();
            proton.stats.add(2, document.getElementById("container"));

            hertEmitter = getHertEmitter();
            plusEmitter = getPlusEmitter();
            proton.addEmitter(hertEmitter);
            proton.addEmitter(plusEmitter);

            renderer = new Proton.EaselRenderer(stage);
            proton.addRenderer(renderer);
        }

        function getHertEmitter() {
            var textures = [];
            for (var i = 0; i < 4; i++) {
                var result = loader.getResult('hert' + (i + 1));
                var texture = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, 80, 80));
                texture.regX = 40;
                texture.regY = 40;
                textures.push(texture);
            }

            var emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(new Proton.Span(3, 5), new Proton.Span(.05, 0.2));

            emitter.addInitialize(new Proton.Body(textures));
            emitter.addInitialize(new Proton.Position(new Proton.LineZone(0, -40, 0, 40)));
            emitter.addInitialize(new Proton.Mass(1, 5));
            emitter.addInitialize(new Proton.Life(1.5));
            emitter.addInitialize(new Proton.Velocity(new Proton.Span(1, 2), new Proton.Span(-90, 20, true), 'polar'));

            emitter.addBehaviour(new Proton.Rotate(new Proton.Span(0, 360), new Proton.Span([-10, -5, 5, 15, 10]), 'add'));
            emitter.addBehaviour(new Proton.Scale(new Proton.Span(.3, .5), 0.2));
            emitter.addBehaviour(new Proton.RandomDrift(5, 0, .15));
            emitter.addBehaviour(new Proton.Alpha(1, 0));
            emitter.emit();

            return emitter;
        }

        function getPlusEmitter() {
            var textures = [];
            for (i = 0; i < 5; i++) {
                var result = loader.getResult('plus' + (i + 1));
                var texture = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, 14, 14));
                texture.regX = 7;
                texture.regY = 7;
                textures.push(texture);
            }

            var emitter = new Proton.Emitter();
            emitter.rate = new Proton.Rate(new Proton.Span(1, 3), new Proton.Span(.05, 0.2));

            emitter.addInitialize(new Proton.Body(textures));
            emitter.addInitialize(new Proton.Mass(1));
            emitter.addInitialize(new Proton.Life(1.5));
            emitter.addInitialize(new Proton.Velocity(new Proton.Span(1, 2), new Proton.Span(0, 20, true), 'polar'));

            emitter.addBehaviour(new Proton.Rotate(new Proton.Span(0, 360), new Proton.Span([-10, -5, 5, 15, 10]), 'add'));
            emitter.addBehaviour(new Proton.Scale(1, 1.2));
            emitter.addBehaviour(new Proton.Alpha(1, 0));

            emitter.p.y = ground.y;
            return emitter;
        }

        function tick(event) {
            var deltaS = event.delta / 1000;
            var position = grant.x + 150 * deltaS;
            var grantW = grant.getBounds().width * grant.scaleX;

            grant.x = (position >= w + grantW) ? -grantW : position;
            ground.x = (ground.x - deltaS * 150) % ground.tileW;
            hill.x = (hill.x - deltaS * 30);
            if (hill.x + hill.image.width * hill.scaleX <= 0) {
                hill.x = w;
            }

            hill2.x = (hill2.x - deltaS * 45);
            if (hill2.x + hill2.image.width * hill2.scaleX <= 0) {
                hill2.x = w;
            }

            if (proton) {
                proton.update();
                proton.stats.update(3);
                hertEmitter.p.x = grant.x;
                hertEmitter.p.y = grant.y + 165;
                stage.addChild(grant);
            }

            stage.update(event);
        }
    </script>
</body>

</html>